<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue';
import type { ISetRoleParams } from '@/api/systemRole/type';

// 角色
const Role = defineAsyncComponent(() => import('./cpn/role/index.vue'));
// 新增角色
const AddRole = defineAsyncComponent(() => import('./cpn/add/index.vue'));
// 职责
const Duty = defineAsyncComponent(() => import('./cpn/duty/index.vue'));

const addRoleRef = ref();
const roleRef = ref();
const dutyRef = ref();

// 处理新增
const handleAddUser = () => {
	addRoleRef.value?.openDialog({});
};
// 处理编辑
const handleEditUser = (params: ISetRoleParams) => {
	addRoleRef.value?.openDialog(params);
};
// 新增成功
const handleRole = () => {
	roleRef.value?.getRole();
};
// 处理职责
const handleDuty = (id: number) => {
	dutyRef.value?.postDuty(id);
};
</script>

<template>
	<div class="system-role">
		<AddRole ref="addRoleRef" @handle-role="handleRole" />
		<Role ref="roleRef" @handle-add-user="handleAddUser" @handle-edit-user="handleEditUser" @handle-duty="handleDuty" />
		<Duty ref="dutyRef" />
	</div>
</template>

<style lang="less" scoped>
@import url('./index.less');
</style>
